<template>
  <div class="p-10">
    <h2 class="text-center text-lg mb-5">会员注册</h2>

    <Form @submit="onSubmit" :validation-schema="schema">
      <Field name="name" class="lj-input" placeholder="请输入姓名" value="刘晶" />
      <ErrorMessage name="name" as="div" class="lj-error" />

      <Field name="email" class="lj-input mt-3" placeholder="请输入邮箱" value="275059231@qq.com" />
      <ErrorMessage name="email" as="div" class="lj-error" />

      <Field name="password" class="lj-input mt-3" type="password" placeholder="请输入密码" value="123456" />
      <ErrorMessage name="password" as="div" class="lj-error" />

      <Field
        name="password_confirm"
        class="lj-input mt-3"
        type="password"
        placeholder="请再次输入密码"
        value="123456" />
      <ErrorMessage name="password_confirm" as="div" class="lj-error" />

      <button type="submit" class="lj-button mt-3">注册</button>
    </Form>
  </div>
</template>

<script setup lang="ts">
import v from '@/plugins/validate'
import useAuthStore from '@/states/useAuthStore'
import { useRouter } from 'vue-router'

const router = useRouter()
const { yup, Form, Field, ErrorMessage } = v

const schema = yup.object({
  name: yup.string().required().label('名称'),
  email: yup.string().required().email().label('邮箱'),
  password: yup.string().required().min(6).label('密码'),
  password_confirm: yup.string().required().min(6).label('确认密码'),
})

const { register } = useAuthStore()
const onSubmit = async (values: any) => {
  const { name, email, password } = values
  await register({
    name,
    email,
    password,
  })
  router.push({ name: 'login' })
}
</script>

<style lang="scss" scoped></style>

<script lang="ts">
export default {
  route: { name: 'register' },
}
</script>
